<template>
  <div class="fa-widget-table-main" :class="isHorizontal ? 'is-horizontal' : 'is-vertical'" :style="style">
    <table class="table" :class="{ 'is-error': data.tableFillError?.full }" cellspacing="0" cellpadding="0">
      <!-- 列 -->
      <colgroup>
        <col v-for="(w, i) in colWidths" :key="i" :width="w" />
      </colgroup>

      <!-- 顶部表头 -->
      <thead v-if="isHorizontal && headerVisible">
        <tr :height="options.headerHeight">
          <HeaderCell
            v-for="(field, index) in data.tableFields"
            :key="index"
            :data="data"
            :field="field"
            :index="index"
          />
        </tr>
      </thead>

      <tbody v-if="isHorizontal">
        <tr v-for="(item, itemIndex) in data.tableData" :key="itemIndex" :height="options.rowHeight + 1">
          <BodyCell
            v-for="(field, fieldIndex) in data.tableFields"
            :key="fieldIndex"
            :data="data"
            :field="field"
            :item="item"
            :field-index="fieldIndex"
            :item-index="itemIndex"
          />
        </tr>

        <tr v-if="data.isUse && options.dynamic" :height="rowHeightDefault + 1">
          <td class="table-cell body-cell operate-cell" :colspan="data.tableFields.length">
            <a class="fa-widget-link el-icon-plus" @click="addRow"> 新增行</a>
          </td>
        </tr>
      </tbody>

      <tbody v-else>
        <tr v-for="(field, fieldIndex) in data.tableFields" :key="fieldIndex" :height="options.rowHeight + 1">
          <!-- 左侧表头 -->
          <HeaderCell v-if="headerVisible" :data="data" :field="field" :index="fieldIndex" />

          <BodyCell
            v-for="(item, itemIndex) in data.tableData"
            :key="itemIndex"
            :data="data"
            :field="field"
            :item="item"
            :field-index="fieldIndex"
            :item-index="itemIndex"
          />
        </tr>
      </tbody>
    </table>

    <ColumnResizer v-if="columnResizable" :data="data" :widths="data.tableColWidths" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, provide, reactive } from 'vue'
import { Message } from 'element-ui'
import { Widget } from '@/models'
import { TableDefault, TableEditState } from '@/types'
import HeaderCell from './HeaderCell.vue'
import BodyCell from './BodyCell.vue'
import ColumnResizer from './ColumnResizer.vue'
import config from '@/config'

/** 表格 */
export default defineComponent({
  name: 'TableMain',

  components: { HeaderCell, BodyCell, ColumnResizer },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 表头是否可隐藏 */
    headerHideable: {
      type: Boolean,
      default: false
    },

    /** 是否允许调整列宽 */
    columnResizable: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    /** 编辑状态 */
    provide(
      'TableEditState',
      reactive({
        fieldIndex: -1,
        itemIndex: -1,
        headerIndex: -1
      } as TableEditState)
    )

    /** 表格选项 */
    const options = computed(() => props.data.tableOptions)

    /** 是否纵向表格 */
    const isHorizontal = computed(() => props.data.isHorizontalTable)

    /** 是否隐藏表头 */
    const headerVisible = computed(() => !props.headerHideable || !options.value.headerHidden)

    return {
      /** 表格选项 */
      options,

      /** 表格列宽 */
      colWidths: computed(() => {
        const { tableColWidths: widths, tableOptions: options } = props.data
        return !props.headerHideable && options.headerHidden ? [TableDefault.colWidthDefault, ...widths] : widths
      }),

      /** 是否横向表格 */
      isHorizontal,

      /** 是否隐藏表头 */
      headerVisible,

      /** 样式 */
      style: computed(() => {
        const widget = props.data
        const { text } = widget

        return {
          fontSize: widget.fontSizeValue,
          fontFamily: widget.fontFamilyValue as string,
          textAlign: text.textAlign
        }
      }),

      /** 默认行高 */
      rowHeightDefault: config.tableDefault.rowHeight,

      /** 添加行 */
      addRow() {
        const widget = props.data

        if (widget.tableData.length + 1 > widget.tableRowsMax) {
          Message.warning('当前页面空间不足，无法继续新增')
          return
        }

        widget.addTableData()
      }
    }
  }
})
</script>

<style lang="scss">
.fa-widget-table-main {
  position: relative;

  .table {
    word-break: break-all;
    overflow-wrap: anywhere;
    table-layout: fixed;
    border-collapse: collapse;
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
  }

  .table-cell {
    position: relative;
    padding: 0;
    vertical-align: middle;
    border: 1px solid #e9e9e9;

    &.is-error:not(.table.is-error .body-cell) {
      background-color: $color-danger-lightest !important;
      outline: 2px solid $color-danger;
      outline-offset: -1px;
    }
  }

  .operate-cell {
    padding: 0 4px;
    text-align: left;
  }
}
</style>
